import { useState,useEffect } from "react";
import {FetchService} from "@/utils/request";
import Ctable from "@/components/commonTable";
import {resType} from "@/commonType";
import { Pagination } from "antd";
import type { TableProps } from 'antd';


type TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>;
type TablePaginationPosition<T extends object> = NonNullable<
  TablePagination<T>['position']
>[number];

const fetchService = new FetchService();


type DataType = {
  id: string;
  username: string;
  nickname: string;
  phone: string;
  email: string;
  role: string;
  status: string;
  userid:string;
}
  
const columns = [
  {
    title: '姓名',
    dataIndex: 'username',
    key: 'username',
    searchable: true,
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '昵称',
    dataIndex: 'nickname',
    key: 'nickname',
  },
  {
    title: '电子邮箱',
    dataIndex: 'email',
    key: 'email',
  },
  {
    title: '操作',
    dataIndex: 'op',
    key: 'op',
  }
];



const User:React.FC = () => {
    const [tableData,setTableData] = useState<any[]>([]);
    const [page,setPage] = useState({pageNum:1,pageSize:10});
    const [total,setTotal] = useState<number>(0);
    const [bottom, setBottom] = useState<TablePaginationPosition<DataType>>('bottomRight');
    const getUser = async () => {
        let res:resType = await fetchService.get("/system/user/find",page);
        if(res.code === 200) {
          let tdata:any = [];
          res.data.data.map((item:DataType) => {
            tdata.push({
              userid: item.userid,
              username: item.username,
              nickname: item.nickname,
              phone: item.phone,
              email: item.email,
            })
          })
          setTotal(res.data.total)
          setTableData(tdata);
        }
    }
    useEffect(()=>{
        getUser();
    },[])

    const search = (info:any)=>{
      console.log(info);
      getUser();
    }

    const addUser = () => {
    }
    
    return (
        <div>
            <Ctable
                dataSource={tableData}
                columns={columns}
                pagination={{
                  onChange:(page:number) => {
                    setPage({pageNum:page,pageSize:10});
                    getUser();
                  },
                  total:total,
                  position:[bottom]
                }}
                role={["add","edit","delete"]}
                searchable={true}
                rowKey="userid"
                search={(info)=>{search(info)}}
                add={()=>{addUser()}}
            />
        </div>
    )
}

export default User;